import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import InvoiceType from '@/components/invoiceType';
import InvoiceStatus from '@xforceplus/invoice-status';
import '@xforceplus/invoice-status/dist/index.css';
import { Drawer, Card, Row, Col, Tooltip, Table, Icon, Button, List, Popover } from 'antd';
//------------------------------------------------
import Footers from '../Footers'
// mapping ro func
import { conversion, formatMyCurrency } from '../moduleUtils'
import { tipDetail } from '../mapping.js'
//------------------------------------------------
import './tosend.scss'

class DrawerStep3 extends Component {
  state = {
    columns: [
      {
        key: 'id',
        dataIndex: 'id',
        width: 30,
        render: (text, record) => {
          return (<span className={"table-tip"}>
            <Tooltip title={tipDetail[record.interfaceType].detail}>
              <div className="tip-top">{tipDetail[record.interfaceType].tip}</div>
            </Tooltip>
            <div className="" style={{width:'16px',height:'16px'}}> </div>{/*二期可能会要加一个 "转" 样式要自己写啦*/}
          </span>
          )
        },
      }, {
        key: 'code',
        dataIndex: 'code',
        render: (text, record) => {
          // console.log(`step3--------------->`, record)
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('batchNo', 'bussinessNo', record, tipDetail, view)
              break;
            case 2:
              conversion('invoiceNo', 'invoiceCode', record, tipDetail, view)
              break;
            case 3:
              conversion('attachmentName', '', record, tipDetail, view)
              break;
            case 4:
              conversion('invoiceNo', 'invoiceCode', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{view.tRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <span>{view.bRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'invoice',
        key: 'invoice',
        render: (text, record) => {
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('', '', record, tipDetail, view)
              break;
            case 2:
              conversion('invoiceType', 'invoiceSheet', record, tipDetail, view)
              break;
            case 3:
              conversion('', '', record, tipDetail, view)
              break;
            case 4:
              conversion('invoiceType', 'invoiceSheet', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <InvoiceType type={view.tRecord} key={'1'} />
              </React.Fragment> : <span>-</span>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <InvoiceStatus status={view.bRecord === 2 ? 3 : view.bRecord} type="INVOICE_JOINTS" />{/*-----------记账联定向到抵扣联----------*/}
              </React.Fragment> : <span>-</span>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'type',
        key: 'type',
        render: (text, record) => {
          record.amountWithTax = formatMyCurrency(record.amountWithTax, 2)
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('bussinessType', 'amountWithTax', record, tipDetail, view)
              break;
            case 2:
              conversion('amountWithTax', 'paperDrewDate', record, tipDetail, view)
              break;
            case 3:
              conversion('', '', record, tipDetail, view)
              break;
            case 4:
              conversion('detailNum', 'paperDrewDate', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{view.tRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <span>{view.bRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'company',
        key: 'company',
        render: (text, record) => {
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
            case 2:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
            case 3:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
            case 4:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{view.tRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <span>{view.bRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => {
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
            case 2:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
            case 3:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
            case 4:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Popover placement="topLeft" content={<div><p>{record.receiverName}  {record.receiverTel || '--'}</p><p>{record.receiverAddr}</p></div>} arrowPointAtCenter>
              <Col>
                {view.tFlag ? <React.Fragment>
                  <span>{view.tInfo}：</span>
                  <span className="text-overflow" style={{maxWidth:'70px'}}>{view.tRecord}</span>
                </React.Fragment> : <span>-</span>}
              </Col>
              <Col>
                {view.bFlag ? <React.Fragment>
                  <span>{view.bInfo}：</span>
                  <span>{view.bRecord}</span>
                </React.Fragment> : <span>-</span>}
              </Col>
            </Popover>
          </Row>
          )
        },
      }
    ]
  }

  render() {
    const { visible, onClose, submitParcels } = this.props;
    const { columns } = this.state;
    const btmRight = <React.Fragment>
      <Popover placement="topLeft" content={"抱歉！暂不支持"} arrowPointAtCenter>
        <Button disabled={true}>下载</Button>
        <Button disabled={true} type="primary">打印</Button>
      </Popover>
    </React.Fragment>

    return (
      <Drawer
        className="drawer-step"
        placement="right"
        width={'100%'}
        closable={false}
        onClose={onClose}
        visible={visible}
      >
        <Card className="drawer-top">
          <Row type="flex" justify="space-between">
            <Col span={20}>
              <Row type="flex" justify="start">
                <Col>当前进度：</Col>
                <Col><div>
                  <span className="radius"></span>
                  <span>选择寄件方式</span>
                  <span className="divider-line"></span>
                  <span className="radius radius-color"></span>
                  <span className="current-span">提交成功</span>
                </div></Col>

              </Row>
            </Col>
            <Col className="text-right color-primary" span={4}><span className="span-back" onClick={onClose}>返回</span></Col>
          </Row>
        </Card>
        <Card>
          <span className="step3-bar"></span><span className="step3-title">运单列表</span>
        </Card>
        {submitParcels && submitParcels.map((item, index) => {
          return (<List key={index}>
            <List.Item>
              <Row className="list-row" type="flex" justify="start">
                <Col><span className="list-radius"></span>包裹{index + 1}</Col>
                <Col className="list-r-col-center"><div className="courier-img"><img src={item.expressLogo} /></div><span>{item.expressName}</span></Col>
                <Col>{item.waybillNo}</Col>
              </Row>
            </List.Item>
            <List.Item>
              <Row className="list-row" type="flex" justify="space-between">
                <Col className="list-btm" span={12}>
                  <span>批次封面：<span className="color-primary">{item.goodsCount.coverCount}</span>个</span>
                  <span>发票联：<span className="color-primary">{item.goodsCount.invoiceSheet1Count}</span>张</span>
                  <span>抵扣联：<span className="color-primary">{item.goodsCount.invoiceSheet2Count}</span>张</span>
                  <span>附件：<span className="color-primary">{item.goodsCount.attachmentCount}</span>个</span>
                  <span>销货清单：<span className="color-primary">{item.goodsCount.salesBillCount}</span>个</span>
                </Col>
              </Row>
            </List.Item>
            <div className="step3-table">
              <Table
                // scroll={{ y: 300 }}
                // rowSelection={rowSelection}
                rowKey="id"
                showHeader={false}
                columns={columns}
                pagination={false}
                dataSource={item.goodsItem} />
            </div>
          </List>)
        })}
        <Footers btmLeft={""} btmRight={btmRight} />
      </Drawer>
    );
  }
}

function mapStateToProps(state) {
  const { submitParcels } = state.logistics;
  return {
    submitParcels,//提交包裹返回数据
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    // getSubmitParcels,//提交包裹
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(DrawerStep3);
